<template>
  <el-container style="height: 100%;">
    <el-header>
      <div id="left">
        <img src="../assets/图片3.png" alt />
      </div>
      <div id="right">
        <div>公告</div>
        <div>关于</div>
        <div>帮助</div>
        <div>退出</div>
      </div>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#d3dce6"
          text-color
          active-text-color="#409EFF"
          router
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-s-custom"></i>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/index/deptlist">个人信息</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>课堂实验预约</span>
            </template>
            <el-menu-item index="/index/emplist">预约实验</el-menu-item>
            <el-menu-item index="/index/emplist">预约管理</el-menu-item>
            <el-menu-item index="/index/emplist">高级搜索</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>个人实验预约</span>
            </template>
            <el-menu-item index="/index/deptlist">预约实验</el-menu-item>
            <el-submenu index="5">
              <template slot="title">
            <span>预约管理</span>
              </template>
              <el-menu-item index="/index/deptlist">已预约</el-menu-item>
              <el-menu-item index="/index/deptlist">已申请</el-menu-item>
              <el-menu-item index="/index/deptlist">已失效</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>学情查询</span>
            </template>
            <el-menu-item index="/index/emplist">课堂实验完成情况</el-menu-item>
            <el-menu-item index="/index/emplist">个人实验完成情况</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="welcomePhoto">
          <img src="../assets/图片2.png" alt />
        </div>
        <el-card class="box-card" style="background-color: #e9eef3;">
          <div slot="header" class="clearfix">
            <span>公告</span>
            <el-button style="float: right; padding: 3px 0" type="text">关闭</el-button>
          </div>
          <div v-for="o in 4" :key="o" class="text item">{{'实验公告' + o }}</div>
        </el-card>
        <router-view />
      </el-main>
    </el-container>
    <el-footer>
      <div>开放实验室 &copy; 版权所有 开放实验室项目组</div>
    </el-footer>
  </el-container>
</template>

<script>
export default {
  methods: {}
};
</script>

<style>
/* -----------header中英双文格式-------------- */
.el-header,
.el-footer {
  color: white;
  text-align: center;
  line-height: 60px;
}
.el-header {
  background: url("../assets/图片1.png");
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

#left {
  display: flex;
  justify-items: left;
}
#left img {
  width: 50%;
}
#right {
  display: flex;
  justify-items: right;
  align-content: space-between;
  font-size: 15px;
}
#right div {
  margin-left: 10px;
  width: 100%;
  height: 100%;
}

.el-footer {
  font-size: 14px;
  background-color: #a09ad6;
}
.el-aside {
  background-color: #d3dce6;
  color: white;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
}
/* ------------------------------公告的格式------------------------------ */
.box-card {
  margin: 0 auto;
  margin-top: 10px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 38px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 900px;
}
/* --------------------欢迎标语格式-------------------------- */

.welcomePhoto {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.welcomePhoto img {
  width: 60%;
}
</style>